<template>
  <div style="padding: 24px; background: #f5f5f5; min-height: 90vh">
    <!-- 原有卡片列表 -->
    <div v-if="!showDetail">
      <el-row :gutter="20">
        <!-- 创建 Agent（固定） -->
        <el-col :span="6">
          <el-card
            shadow="hover"
            style="
              position: relative;
              cursor: pointer;
              height: 200px;
              border-radius: 16px;
              margin-top: 10px;
            "
            @click.native="created = true"
          >
            <div
              style="
                font-size: 16px;
                font-weight: 100;
                margin-bottom: 12px;
                width: 100%;
                height: 170px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <el-button
                circle
                type="text"
                style="
                  background: #f5f4fe;
                  border: none;
                  width: 48px;
                  height: 48px;
                  font-size: 24px;
                  color: #666666;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                +
              </el-button>
              <div style="margin-top: 10px; color: #7363e9">创建 Agent</div>
            </div>
          </el-card>
        </el-col>
        <!-- 循环其余卡片（已加点击事件） -->
        <template v-for="(card, idx) in cards">
          <el-col :span="6" :key="card.bot_id">
            <el-card
              shadow="hover"
              style="
                position: relative;
                cursor: pointer;
                height: 200px;
                border-radius: 16px;
                margin-top: 10px;
              "
              @click.native="openDetail(card)"
            >
              <el-dropdown
                trigger="click"
                style="position: absolute; top: 14px; right: 14px"
                append-to-body
              >
                <span style="font-size: 26px;font-weight: bold; color: #999" @click.stop>···</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="delRobot(card.bot_id)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div
                style="
                  font-size: 16px;
                  font-weight: 600;
                  margin-bottom: 12px;
                  display: flex;
                  flex-direction: row;
                "
              >
                <img
                  src="@/assets/images/tx.png"
                  alt=""
                  style="width: 45px; height: 45px"
                />
                <div
                  style="display: flex; align-items: center; margin-left: 10px"
                >
                  {{ card.bot_name }}
                </div>
              </div>
              <div
                style="
                  font-size: 12px;
                  color: #909399;
                  position: absolute;
                  bottom: 14px;
                  left: 20px;
                "
              >
                最近编辑 {{ card.update_time }}
              </div>
            </el-card>
          </el-col>

          <!-- 每 4 个卡片后插入换行空隙 -->
          <br
            v-if="(idx + 2) % 4 === 0"
            style="content: ''; display: block; height: 20px; width: 100%"
            :key="'br-' + idx"
          />
        </template>
      </el-row>
    </div>
    <!-- 新增的整屏大卡片（不破坏原结构） -->
    <div v-else>
      <robot-details ref="botDetails" @back="back" v-bind:botId="botId"></robot-details>
    </div>
    <!-- 新增机器人弹窗 -->
    <el-dialog
      title="创建Bot"
      :visible.sync="created"
      width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="1px" style="width: 90%;margin-left: 5%">
        <div class="share-qr"
             style="font-size: 16px;font-weight: 400;display: flex;flex-direction: row;margin-bottom: 10px">Bot 名称
          <span class="xinghao">*</span>
        </div>
        <el-form-item label="" prop="bot_name">
          <el-input
            v-model="form.bot_name"
            placeholder="请输入名称"
            maxlength="20"
            show-word-limit>
          </el-input>
        </el-form-item>
        <div style="margin-bottom: 10px">Bot 功能介绍</div>
        <el-form-item label="">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="5"
            maxlength="200"
            show-word-limit
            placeholder="介绍Bot功能">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="created = false">取消</el-button>
            <el-button type="primary" @click="createRobot">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import { robotList,addRobot,robotDel } from '@/api/robot/index'
import robotDetails from '../modules/robotDetails'

export default {
  name: "AssistantsPage",
  components: { robotDetails },
  data() {
    return {
      showShareDialog: false,
      created: false,
      showDetail: false,
      cards:[],
      form:{
        bot_name:'',
        description:'',
      },
      rules: {
        bot_name: [
          { required: true, message: '输入名称不能为空', trigger: 'blur' }
        ]
      },
      botId:'',
    };
  },
  created() {
    this.getRobotList()
  },
  methods: {
    getRobotList(){
      robotList().then(res => {
        this.cards = res.data;
      })
    },
    createRobot(){
      this.$refs.form.validate(valid => {
        if (valid) {
          addRobot(this.form).then(res => {
            this.created = false
            this.$message({ message: '新增成功', type: 'success' });
            this.getRobotList()
          })
        }
      })
    },
    delRobot(id){
      robotDel({ bot_id:id }).then(res => {
        this.$message({ message: '删除成功', type: 'success' });
        this.getRobotList()
      }).catch(error => {
        this.getRobotList()
      })
    },
    openDetail(card) {
      this.showDetail = true;
      this.botId = card.bot_id
      this.$nextTick(() => {
        this.$refs.botDetails.getAllDetails()
      })
    },
    back(){
      this.showDetail = false
      this.getDetails()
    }
  },
};
</script>
<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.share-popup {
  width: 420px;
  max-height: 90vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

.share-url {
  margin-bottom: 12px;
}
.share-qr {
  font-size: 16px;
  font-weight: 400;
}

.xinghao {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 500;
  margin-left: 5px;
}
</style>
